<template>
  <div id="app">
    <el-row :gutter="20">
      <!-- gutter 栅格间距 -->
      <el-col :span="8" :offset="8">
        <!-- span 栅格占的列数，offset是偏移列数 -->
        <div class="grid-content"></div>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <!-- gutter 栅格间距 -->

      <el-col :span="22" :offset="1">
        <!-- span 栅格占的列数，offset是偏移列数 -->
        <el-card shadow="always">
          <h1>登录页面</h1>
          <el-divider></el-divider>

          <el-form
            :model="nameValidateForm"
            ref="nameValidateForm"
            label-width="100px"
            class="demo-ruleForm"
          >
            <!-- 用户名 -->
            <el-row>
              <el-col :span="12">
                <el-form-item
                  label="用户名"
                  prop="name"
                  :rules="[{ required: true, message: '用户名不能为空' }]"
                >
                  <el-input
                    placeholder="请输入用户名"
                    type="text"
                    v-model="nameValidateForm.name"
                    autocomplete="off"
                  >
                    <span slot="suffix">元</span>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <!-- 密码 -->
                <el-form-item
                  label="密码"
                  prop="password"
                  :rules="[{ required: true, message: '密码不能为空' }]"
                >
                  <el-input
                    placeholder="请输入密码"
                    v-model="nameValidateForm.password"
                    show-password
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item
                  label="订单价格"
                  prop="name"
                  :rules="[{ required: true, message: '用户名不能为空' }]"
                >
                  <el-input
                    placeholder="请输入用户名"
                    type="text"
                    v-model="nameValidateForm.name"
                    autocomplete="off"
                  >
                    <span slot="suffix">元</span>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <!-- 密码 -->
                <el-form-item
                  class="f pwd"
                  label="代练事件"
                  prop="password"
                  :rules="[{ required: true, message: '密码不能为空' }]"
                >
                  <el-input
                    placeholder="请输入密码"
                    v-model="nameValidateForm.password"
                  >
                    <template>
                      <span slot="suffix">120/300</span>
                    </template>
                  </el-input>
                </el-form-item>
                <!-- 密码 -->
                <el-form-item
                  class="f pwd"
                  width="200px"
                  label="代练事件"
                  prop="password"
                  :rules="[{ required: true, message: '密码不能为空' }]"
                >
                  <el-input
                    placeholder="请输入密码"
                    v-model="nameValidateForm.password"
                  >
                    <template>
                      <span slot="suffix">120/300</span>
                    </template>
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row class="design-thugs">
              <el-col :span="22">
                <el-form-item label="发单渠道：" prop="region">
                  <el-select
                    v-model="nameValidateForm.region"
                    placeholder="请选择活动区域"
                    @change="change"
                    :popper-append-to-body="false"
                  >
                    <el-option
                      label="公共频道（平台所有打手都可以看到订单）"
                      :value="0"
                    ></el-option>
                    <!-- <el-option
                      label="指定打手（指定发布给您信任的代练打手）"
                      value="1"
                    ></el-option> -->
                    <!-- :label="msg" v-html="msg" -->
                    <el-option
                      :value="1"
                      label="指定打手（指定发布给您信任的代练打手）"
                    >
                      <!-- <span style="float: left"
                        >指定打手（指定发布给您信任的代练打手）</span
                      >
                      <span
                        style="float: right; color: #8492a6; font-size: 13px"
                        >222</span
                      > -->
                    </el-option>
                  </el-select>
                  <span class="remindersNum">已选543人</span>
                </el-form-item>
              </el-col>
              <design-thugs-table
                class="design-thugs-table"
                v-show="isTableVisible"
              />
            </el-row>
            <el-form-item class="">
              <el-select
                class="my-el-select"
                v-model="tenantCont"
                placeholder="请输入机构标识"
              >
                <el-option-group
                  v-for="group in options"
                  :key="group.label"
                  :label="group.label"
                >
                  <el-option
                    v-for="item in group.options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-option-group>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm('nameValidateForm')"
                >提交</el-button
              >
              <el-button @click="resetForm('nameValidateForm')">重置</el-button>
            </el-form-item>

            <el-form-item style="width: 450px; height: 660px">
              <el-input
                type="textarea"
                placeholder="请输入内容"
                v-model="textarea"
                maxlength="3000"
                show-word-limit
              >
              </el-input>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import DesignThugsTable from './DesignThugsTable.vue'
export default {
  data() {
    return {
      isTableVisible: false,
      name:
        '<span style="float: left">指定打手（指定发布给您信任的代手）</span >' +
        '<span style="float: right; color: #8492a6; font-size: 13px">233333322</span>',
      // msg: '<h1 style="color:red;"></h1>',
      msg: '<h3>这是一个h1元素内容</h3>',
      nameValidateForm: {
        name: '',
        password: '',
        region: 1,
      },
      tenantCont: '000001',
      textarea:
        '22但事\r\n实上所所所所22但\r\n事实上所所\r\n所所22但事实上所所所所\r\n22但事实上所所所所22但事实上所所所所',
      options: [
        {
          label: '之前登录的机构标识',
          options: [
            {
              value: '000001',
              label: '蓝翔1山东蓝翔1(机构标识001)',
            },
            {
              value: '000002',
              label: '蓝翔1山东蓝1山东蓝翔1(机构标识001)',
            },
            {
              value: '000003',
              label: '蓝翔1山东蓝翔1(机构标识001)',
            },
          ],
        },
      ],
    }
  },
  components: {
    DesignThugsTable,
  },
  created() {
    // 使用正则替换
    this.textarea = this.textarea.replace(/\r\n/g, '')
  },
  methods: {
    change(val) {
      // debugger
      if (val == 0) {
        this.isTableVisible = false
      } else {
        //指定打手
        this.isTableVisible = true
      }
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert(
            'Name:' +
              this.nameValidateForm.name +
              ';Password:' +
              this.nameValidateForm.password
          )
          // console.log(this.nameValidateForm.name);
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
  },
}
</script>

<style>
.content {
  margin: 0 auto;
}
.el-card {
  border-radius: 30px;
  /* box-shadow: 0 2px 12px 0 rgb(243, 102, 102); */
  /* box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04); */
}
.grid-content {
  /* background: rgb(14, 214, 131); */
  border-radius: 4px;
  min-height: 80px;
}
.el-select {
  display: block;
}
.el-row {
  margin-bottom: 20px;
}
.f {
  float: left;
}
.pwd {
  width: 200px;
}
.design-thugs {
  position: relative;
  width: 789px;
}
.design-thugs .el-form-item {
  position: relative;
}
.remindersNum {
  position: absolute;
  top: 0px;
  right: 30px;
}

.design-thugs-table {
  width: 600px;
  position: absolute;
  top: 40px;
  left: 100px;
  z-index: 2000;
  /* background: #ccc; */
  border: 1px solid #ccc;
}
.demo-ruleForm {
  min-height: 1000px;
}

/* // 之前登录的机构标识 居中 */
.el-scrollbar .el-select-group__wrap /deep/ .el-select-group__title {
  text-align: center !important;
}
/* // 内容居中 */
.el-scrollbar .el-select-group__wrap /deep/ .el-select-dropdown__item {
  text-align: center !important;
}
/* // 去除点击时候的淡蓝色边框 */
.my-el-select /deep/ .el-input .el-input__inner {
  border-color: #dcdfe6 !important;
}
.remindersNum {
  position: absolute;
}
</style>
